<template>
  <div class="middlearea">
    <div class="middle-left">
      <div class="middle-left-top"><slot name="middle-left-top"></slot></div>
      <div class="middle-left-bot"><slot name="middle-left-bot"></slot></div>
    </div>
    <div class="middle-right">
      <div class="middle-right-top"><slot name="middle-right-top"></slot></div>
      <div class="middle-right-bot"><slot name="middle-right-bot"></slot></div>
    </div>
  </div>
</template>

<script>
export default {
  name:'MiddleArea'
}
</script>

<style scoped>
  .middlearea{
    width: 100%;
    padding-top: 50px;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
  }
  .middle-left{
    width: 70%;
    height: 320px;
  }
  .middle-right{
    width: 30%;
  }
  .middle-left-top{
    width: 100%;
    height: 60px;
    margin: 0 5px 0 0px;
    /* background: coral; */
  }
  .middle-left-bot{
    width: 100%;
    height: 320px;
    margin: 0 5px 0 0px;
    /* background: darkcyan; */
  }
  .middle-right-top{
    width: 100%px;
    height: 60px;
    /* background: cornflowerblue; */
  }
  .middle-right-bot{
    width: 100%;
    height: 320px;
    /* background: darkred;*/
  } 
</style>